<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('商品规格属性')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-goods-edit" th:object="${storeGoods}">
            <input name="goodsId" th:field="*{goodsId}" type="hidden">
            <input type="hidden" name="goodsType"  th:field="*{goodsType}">
            <div class="form-group">
                <label class="col-sm-2 control-label">商品模型：</label>
                <div class="col-sm-10">
                    <select class="form-control" name="type_id" id="optionId">
                        <option value="">请选择商品模型</option>
                        <option th:each="goodstype : ${goodsTypes}" th:text="${goodstype.name}" th:value="${goodstype.id}" th:selected="(${goodstype.id}) == (*{goodsType})"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品规格</label>
                <div class='col-sm-10'>
                    <table class="table table-bordered" id="spec_item">
                        <tr>

                        </tr>
                    </table>
                    <table class="table table-bordered" id="goods_spec_table2">
                        <thead>
                        <tr id="spec_price_col">
                            <th>进货价</th><th>零售价</th><th>库存</th>
                        </tr>
                        </thead>

                    </table>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品属性</label>
                <div class='col-sm-10'>
                    <table class="table table-bordered" id="goods_attr_table">
                        <tr>
                            <td><b>商品属性</b></td>
                            <td><b>商品值</b></td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />

    <script th:inline="javascript">
        var prefix = ctx + "shop/goods";
        $("#form-goods-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $("#goods_spec_table2")
                $.operate.save(prefix + "/saveSpecAttr", $('#form-goods-edit').serialize());
            }
        }


        /**
         * 获取规格
         * @param type_id
         * @param goods_id
         */
        function getPostSpec(type_id,goods_id){
            $.post(prefix + "/ajaxSpec",{type_id:type_id,goods_id:goods_id},function(result){
                var html = '';
                $('#spec_item').html('');
                if(result.code == 0){
                    var new_data = result.data.data;
                    if(new_data.length == 0) $('#spec_item').html('');
                    for(var i = 0;i < new_data.length;i++){
                        html = '<tr>';
                        html += '<td width="10%">'+new_data[i].name+'</td>';
                        html += '<td>';
                        var items = new_data[i].storeSpecItems;
                        for(var j = 0;j < items.length;j++){
                            if(items[j].selected){
                                html += '<button type="button" onclick="addSpec(this)" data-spec_id="'+items[j].specId+'" data-item_id="'+items[j].id+'"' +
                                    ' class="btn btn-danger">'+items[j].item+'</button>&nbsp;';
                            }else{
                                html += '<button type="button" onclick="addSpec(this)" data-spec_id="'+items[j].specId+'" data-item_id="'+items[j].id+'"' +
                                    ' class="btn btn-success">'+items[j].item+'</button>&nbsp;';
                            }

                        }
                        html += '</td>';
                        html += '</tr>';
                        $('#spec_item').append(html);
                    }

                   // ajaxGetAttrInput(type_id);
                    ajaxGetSpecInput();

                }
            },'json');
        }

        function addSpec(event){
            var _this = $(event);
            if(_this.hasClass('btn-danger')){
                _this.removeClass('btn-danger');
            }else{
                _this.addClass('btn-danger');

            }
            var spec_id = _this.data('spec_id');
            var item_id = _this.data('item_id');
            ajaxGetSpecInput();
            return false;
        }

        /**
         *  点击商品规格触发下面输入框显示
         */
        function ajaxGetSpecInput() {
            var spec_arr = [];// 用户选择的规格数组

            var jsonObj = {};

            //console.log(spec_arr1);
            $("#spec_item button").each(function(){
                var j = {};
                if($(this).hasClass('btn-danger'))
                {
                    var spec_id = $(this).data('spec_id');
                    var item_id = $(this).data('item_id');
                    j.specId = spec_id;
                    j.itemId = item_id;
                    // if(!spec_arr.hasOwnProperty(spec_id))
                    //     spec_arr[spec_id] = [];
                    //spec_arr[spec_id].push(item_id);

                    spec_arr.push(j);

                }
            });
            var goods_id = $("input[name='goodsId']").val();
            jsonObj.list = spec_arr;
            jsonObj.goodsId = goods_id;
            //console.log(spec_arr);
            //console.log(spec_arr);
            //console.log(JSON.stringify(spec_arr));
            ajaxGetSpecInput2(JSON.stringify(jsonObj)); // 显示下面的输入框

        }

        function ajaxGetSpecInput2(spec_arr) {
            var goods_id = $("input[name='goodsId']").val();
            $.ajax({
                type:'POST',
                data:spec_arr,
                url:prefix + "/ajaxGetSpecInput",
                contentType:"application/json;charset=utf-8",
                success:function(data){
                    $("#goods_spec_table2").html('').append(data.data);
                    hbdyg();  // 合并单元格
                }
            });
        }

        function ajaxGetAttrInput(spec_type,goods_id) {
            //var goods_id = $("input[name='goodsId']").val();
            $.ajax({
                type:'POST',
                data:{goods_id:goods_id,type_id:spec_type},
                url:prefix + "/ajaxGetAttrInput",
                success:function(data){
                    $("#goods_attr_table tr:gt(0)").remove();
                    $("#goods_attr_table").append(data.data);
                }
            });
        }

        // 合并单元格
        function hbdyg() {
            var tab = document.getElementById("spec_input_tab"); //要合并的tableID
            var maxCol = 2, val, count, start;  //maxCol：合并单元格作用到多少列
            if (tab != null) {
                for (var col = maxCol - 1; col >= 0; col--) {
                    count = 1;
                    val = "";
                    for (var i = 0; i < tab.rows.length; i++) {
                        if (val == tab.rows[i].cells[col].innerHTML) {
                            count++;
                        } else {
                            if (count > 1) { //合并
                                start = i - count;
                                tab.rows[start].cells[col].rowSpan = count;
                                for (var j = start + 1; j < i; j++) {
                                    tab.rows[j].cells[col].style.display = "none";
                                }
                                count = 1;
                            }
                            val = tab.rows[i].cells[col].innerHTML;
                        }
                    }
                    if (count > 1) { //合并，最后几行相同的情况下
                        start = i - count;
                        tab.rows[start].cells[col].rowSpan = count;
                        for (var j = start + 1; j < i; j++) {
                            tab.rows[j].cells[col].style.display = "none";
                        }
                    }
                }
            }
        }



        $(document).ready(function () {
            var type_id = $("input[name='goodsType']").val();
            var goods_id = $("input[name='goodsId']").val();

            if($.common.isEmpty(type_id)){
                type_id = 0;
            }

            if($.common.isEmpty(goods_id)){
                goods_id = 0;
            }

            getPostSpec(type_id,goods_id);

            ajaxGetAttrInput(type_id,goods_id);


            //选择模型
            $("#optionId").bind("change", function () {
                var id = $("#optionId option:selected").val();
                $('#goods_spec_table2').html(' <thead>\n' +
                    '                            <tr id="spec_price_col">\n' +
                    '                                <th>进货价</th><th>零售价</th><th>库存</th>\n' +
                    '                            </tr>\n' +
                    '                            </thead>');
                ajaxGetAttrInput(id,0);
                getPostSpec(id,0);
            });

        });

    </script>
</body>
</html>